<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/layui-v2.6.4/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
    <script src="/layui/vue.min.js"></script>
</head>
<body>
<div>
    <div style="margin-left: 20px;margin-right: 20px;margin-bottom: 100px">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>新闻发布</legend>
        </fieldset>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-panel">
                    <div style="padding: 50px 30px;">
                        <form class="layui-form" style="margin-right: 100px">
                            <div style="text-align: center">
                                <div class="layui-upload-drag" id="upload">
                                    <i class="layui-icon"></i>
                                    <p>点击上传新闻封面图片，或将文件拖拽到此处</p>
                                    <div class="layui-hide" id="uploadDemoView">
                                        <hr>
                                        <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                    </div>
                                </div>
                                <input id="newsImage" name="newsImage" lay-verify="image" hidden>
                            </div>
                            <br>
                            <br>
                            <div class="layui-form-item">
                                <label class="layui-form-label">新闻标题<span style="color: red">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="newsTitle" lay-verify="required" autocomplete="off" placeholder="请输入新闻标题" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">新闻内容<span style="color: red">*</span></label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea layui-hide" name="newsDetail" id="demo"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">发布作者<span style="color: red">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="newsAuthor" lay-verify="required" autocomplete="off" placeholder="请输入作者" class="layui-input">
                                </div>
                            </div>
                            <div style="margin: 20px 20px;text-align: center">
                                <button class="layui-btn layui-btn-primary" lay-submit lay-filter="add">确认添加</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['form','layer','layedit','upload'],function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            upload = layui.upload;

        layedit.set({
            uploadImage: {
                url: '/uploadLayEdit' //接口url
            }
        });

        layedit.build('demo');

        var index = layedit.build('demo')

        //拖拽上传
        upload.render({
            elem: '#upload'
            ,url: '/upload' //改成您自己的上传接口
            ,done: function(res){
                layer.msg(res.msg);
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
                $("#newsImage").val(res.data)
            }
        });

        form.on('submit(add)',function (data){
            layedit.sync(index);
            data.field.newsDetail = $("#demo").val();
            axios.post("/end/news/add",data.field).then(res => {
                layer.msg(res.data.msg);
            })
            return false
        })

        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '输入项至少得1个字符啊';
                }
            }
            ,image: function (value) {
                if(value.length < 1){
                    return '图片不可以无哇';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

    })
</script>
</html>
